<!DOCTYPE html>
<head>
	<title>DT Validator首页、文档、示例和下载 - DESTINY Validator、文档、示例和下载 - jQuery 前端验证 - 大连首闻科技有限公司</title>
	<meta name="Keywords" content="DT Validator,DESTINY Validator,DT Validator是什么,DT Validator示例,DT Validator下载,前端验证插件,JavaScript,跨平台,jQuery验证插件"/>
	<meta name="Description" content="DESTINY Validator（DT Validator）是一款由大连首闻科技有限公司自主研发的基于MIT开源协议的前端验证组件，拥有使用简单、功能强大、跨浏览器支持、程序思路清晰、高效加载等众多优秀素质。"/>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<!-- favicon -->
	<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
	<!-- jQuery -->
	<script type="text/javascript" src="../dependents/jquery/jquery.min.js"></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="../dependents/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../dependents/bootstrap/css/bootstrap.min.css" />
	<!--[if lt IE 9]>
		<script src="../dependents/bootstrap/plugins/ie/html5shiv.js"></script>
		<script src="../dependents/bootstrap/plugins/ie/respond.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<script src="../dependents/bootstrap/plugins/ie/json2.js"></script>
	<![endif]-->
	<!-- font-awesome -->
	<link rel="stylesheet" type="text/css" href="../dependents/fontAwesome/css/font-awesome.min.css" media="all" />
	<!-- toTop -->
	<script type="text/javascript" src="toTop/jquery.toTop.js"></script>
	<link rel="stylesheet" type="text/css" href="toTop/jquery.toTop.css" />
	<!-- syntaxHighLighter -->
	<script type="text/javascript" src="syntaxHighLighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushJScript.js"></script>
	<link rel="stylesheet" type="text/css" href="syntaxHighLighter/styles/shCore.css" />
	<link rel="stylesheet" type="text/css" href="syntaxHighLighter/styles/shThemeDefault.css" />
	<!-- jquery pin -->
	<script type="text/javascript" src="jquery.pin/jquery.pin.js"></script>
	<!-- doc css -->
	<link rel="stylesheet" type="text/css" href="css/doc.css" />
	<!-- icon css -->
	<link rel="stylesheet" type="text/css" href="css/icons.css" />
	<script type="text/javascript">
	$(function(){
		//语法着色
		SyntaxHighlighter.config.clipboardSwf = 'syntaxHighLighter/scripts/clipboard.swf';
		SyntaxHighlighter.all();
		//钉住菜单
		$(".left-sider").pin({
			minWidth: 992
		});
		//左侧菜单注册事件
		$(".left-sider>ul>li>a").toggle(function(){
			$(this).children('i').removeClass('fa-caret-right').addClass('fa-caret-down');
			$(this).next('ul').slideDown(200);
		}, function(){
			$(this).children('i').removeClass('fa-caret-down').addClass('fa-caret-right');
			$(this).next('ul').slideUp(200);
		});
		//左侧菜单除了第一个全部关闭
		$(".left-sider>ul>li>ul:not(:first)").hide();
		$(".left-sider>ul>li>a:first").click();
	});
	</script>
</head>
<body>
	<header class="navbar navbar-inverse navbar-absolute-top" role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">工具</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="http://www.dtvalidator.com" class="navbar-brand">
					<i class="icon icon-destiny-validator"></i>&nbsp;&nbsp;DESTINY Validator
				</a>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
				<ul class="nav navbar-nav">
					<li id="nav_home">
						<a href="index.html"><i class="fa fa-home"></i>&nbsp;&nbsp;首页</a>
					</li>
					<li id="nav_example">
						<a href="example.html"><i class="fa fa-table"></i>&nbsp;&nbsp;示例</a>
					</li>
					<li id="nav_document" class="active">
						<a href="document.html"><i class="fa fa-file-text-o"></i>&nbsp;&nbsp;文档</a>
					</li>
					<li id="nav_download">
						<a href="download.html"><i class="fa fa-download"></i>&nbsp;&nbsp;下载</a>
					</li>
					<li id="nav_about">
						<a href="about.html"><i class="fa fa-info"></i>&nbsp;&nbsp;关于</a>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li id="nav_donate" class="donate">
						<a href="donate.html"><i class="fa fa-usd"></i>&nbsp;&nbsp;捐助DT Validator</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="container">
		<div class="col-md-3">
			<div class="layout left-sider">
				<ul>
					<li>
						<a href="#3.1"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;部署</a>
						<ul>
							<li><a href="#3.1.1">基础文件引入</a></li>
							<li><a href="#3.1.2">语言文件引入</a></li>
							<li><a href="#3.1.3">对象实例化</a></li>
						</ul>
					</li>
					<li>
						<a href="#3.2"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;验证属性</a>
						<ul>
							<li><a href="#3.2.1">valid</a></li>
							<li><a href="#3.2.2">validTitle</a></li>
							<li><a href="#3.2.3">validInfoArea</a></li>
							<li><a href="#3.2.4">validPassword</a></li>
							<li><a href="#3.2.5">validUnique</a></li>
							<li><a href="#3.2.6">validElementCss</a></li>
							<li><a href="#3.2.7">validInfoAreaCss</a></li>
						</ul>
					</li>
					<li>
						<a href="#3.3"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;验证参数</a>
						<ul>
							<li><a href="#3.3.1">unique</a></li>
							<li><a href="#3.3.2">validType</a></li>
							<li><a href="#3.3.3">css</a></li>
							<li><a href="#3.3.4">icon</a></li>
							<li><a href="#3.3.5">elementCallback</a></li>
						</ul>
					</li>
					<li>
						<a href="#3.4"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;对象方法</a>
						<ul>
							<li><a href="#3.4.1">init</a></li>
							<li><a href="#3.4.2">singleValid</a></li>
							<li><a href="#3.4.3">valid</a></li>
							<li><a href="#3.4.4">validResult</a></li>
							<li><a href="#3.4.5">reset</a></li>
						</ul>
					</li>
					<li>
						<a href="#3.5"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;静态方法</a>
						<ul>
							<li><a href="#3.5.1">toast</a></li>
							<li><a href="#3.5.2">replaceAll</a></li>
							<li><a href="#3.5.3">length</a></li>
						</ul>
					</li>
					<li>
						<a href="#3.6"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;高级功能</a>
						<ul>
							<li><a href="#3.6.1">唯一验证的封装</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-md-9">
			<div class="layout main-container">
				<div id="3.1" class="title">部署</div>
				<hr />
				<div id="3.1.1" class="sub-title">基础文件引入</div>
				<p>我们为您推荐的javascript文件和css文件的引用顺序如下：</p>
				<pre class="brush:xml;">&lt;!-- jQuery --&gt;
&lt;script type="text/javascript" src="../dependents/jquery/jquery.min.js"&gt;&lt;/script&gt;
&lt;!-- font-awesome --&gt;
&lt;link rel="stylesheet" type="text/css" href="../dependents/fontAwesome/css/font-awesome.min.css" media="all" /&gt;
&lt;!-- dtvalidator --&gt;
&lt;script type="text/javascript" src="../jquery.dtValidator.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../i18n/en.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="../jquery.dtValidator.css" /&gt;
&lt;!-- datePicker --&gt;
&lt;script type="text/javascript" src="../dependents/datePicker/WdatePicker.js" defer="defer"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="../dependents/datePicker/skin/WdatePicker.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="../dependents/datePicker/skin/default/datepicker.css" /&gt;</pre>
				<div id="3.1.2" class="sub-title">语言文件引入</div>
				<p>将i18n文件夹中您所需要的语言文件引入到jquery.dtvalidator.js文件下方即可。</p>
				<pre class="brush:xml;">&lt;script type="text/javascript" src="../i18n/en.js"&gt;&lt;/script&gt;</pre>
				<div id="3.1.3" class="sub-title">对象实例化</div>
				<p>您可以使用如下代码对DtValidator对象进行对象实例化，实例化后的对象将支持众多方法，具体的实例化参数及相关方法请查阅后续参考文档。</p>
				<pre class="brush:js;">var validator;
$(function(){
	validator = $('#testForm').dtValidator();
});</pre>
				<div id="3.2" class="title">验证属性</div>
				<hr />
				<div id="3.2.1" class="sub-title">valid</div>
				<p>验证格式，为DT Validator组件中最重要的属性，该属性中需要您定义验证的脚本，多级验证脚本使用|分隔符进行分割。脚本支持的内容如下：</p>
				<p><code>r</code>：必填、必选</p>
				<p><code>l</code>：长度标识</p>
				<p><code>m</code>：大小标识</p>
				<p><code>e</code>：包含等于</p>
				<p><code>-</code>：范围标识</p>
				<p><code>email</code>：邮箱验证</p>
				<p><code>phone</code>：电话号码验证，主要应用于座机</p>
				<p><code>english_number</code>：英文或数字组合验证</p>
				<p><code>mobile</code>：手机号码验证</p>
				<p><code>url</code>：超链接验证</p>
				<p><code>money</code>：金额验证</p>
				<p><code>number</code>：数值格式验证，类似正整数，但可以加前缀0，比如0039283也是合法的</p>
				<p><code>zip</code>：邮政编码验证</p>
				<p><code>qq</code>：QQ号码验证</p>
				<p><code>integer</code>：整数验证</p>
				<p><code>double</code>：浮点数验证</p>
				<p><code>english</code>：英文字符验证</p>
				<p><code>chinese</code>：中文字符验证</p>
				<p><code>card</code>：身份证验证</p>
				<p>例如：</p>
				<p><code>r|english|l6-le20</code>：表示该内容必须填写，且必须为英文格式，而且长度必须在大于6且小于等于20之间。</p>
				<p><code>r|double|me200-me2000</code>：表示该内容必须填写，且必须为浮点类型格式，而且大小必须在大于等于200且小于等于2000之间。</p>
				<div id="3.2.2" class="sub-title">validTitle</div>
				<p>验证时提示的名称，通常同<code>label</code>名称相同。</p>
				<div id="3.2.3" class="sub-title">validInfoArea</div>
				<p>验证时提示的内容区域的id，通常定义在<code>span</code>或<code>div</code>中。</p>
				<div id="3.2.4" class="sub-title">validPassword</div>
				<p>验证重复密码是否同密码匹配，该属性应用于重复密码文本中，内容为制定密码文本的<code>id</code>。</p>
				<p>内容格式化属性，该属性仅当列类型为<code>date</code>或<code>number</code>时有效。</p>
				<div id="3.2.5" class="sub-title">validUnique</div>
				<p>用于唯一验证的定义，脚本格式为：类别[|参数id]*。</p>
				<p>例如：</p>
				<p><code>user_add</code>：表示该唯一验证类别为<code>user_add</code>，在验证服务器端该参数将被传递。</p>
				<p><code>user_edit|user_id</code>：表示该唯一验证类别为<code>user_edit</code>，且需要传递该<code>form</code>中<code>id</code>为<code>user_id</code>元素中的内容，这样的设计主要用于编辑方面的保存，自己的原值重复不作考虑。</p>
				<div id="3.2.6" class="sub-title">validElementCss</div>
				<p>用于定义元素在验证过程中的<code>css</code>，格式为：<code>初始化样式|验证中样式|验证成功样式|验证失败样式</code>。</p>
				<p>如果该只未定义，则该内容将为默认的<code>option</code>中<code>css</code>属性中的<code>element</code>参数中定义的样式。</p>
				<div id="3.2.7" class="sub-title">validInfoAreaCss</div>
				<p>用于定义错误信息在验证过程中的<code>css</code>，格式为：<code>初始化样式|验证中样式|验证成功样式|验证失败样式</code>。</p>
				<p>如果该只未定义，则该内容将为默认的<code>option</code>中<code>css</code>属性中的<code>area</code>参数中定义的样式。</p>
				<div id="3.3" class="title">验证参数</div>
				<hr />
				<p>表格属性主要用于对表格全局属性的配置。</p>
				<div id="3.3.1" class="sub-title">unique</div>
				<p>定义服务器唯一验证的<code>url地址</code>。</p>
				<div id="3.3.2" class="sub-title">validType</div>
				<p>定义自定义验证格式的参数，该参数定义完成之后需要在国际化文件中对应加入格式名称，用于提示。该参数的内容接受参数可以是一个正则表达式，或一个方法，方法返回的对象中包含两个参数：<code>success</code>、<code>message</code>。</p>
				<p><code>success</code>：是否成功，成功为true，失败为false</p>
				<p><code>message</code>：如果验证失败的提示信息，支持{validTitle}参数。</p>
				<div id="3.3.3" class="sub-title">css</div>
				<p>用于配置预置的样式内容，其中包含<code>element元素</code>的样式、<code>area验证区域</code>的显示信息区域的样式。</p>
				<div id="3.3.4" class="sub-title">icon</div>
				<p>用于配置显示内容的前缀，目前是使用FontAwesome组件来完成，如果您有特殊需要，可以更改该属性，使用自己的图标库。</p>
				<div id="3.3.5" class="sub-title">elementCallback</div>
				<p>用于配置各个环节的验证组件后对元素的处理。</p>
				<p>参数列表：</p>
				<p><code>element</code>：元素对象</p>
				<p><code>css</code>：样式内容，包含<code>init</code>、<code>validating</code>、<code>success</code>、<code>failure</code>四个样式。</p>
				<p>本处理默认为bootstrap风格样式的元素处理。</p>
				<div id="3.4" class="title">对象方法</div>
				<hr />
				<p>对象方法可以通过实例化好的<code>DtValidator对象</code>直接调用。</p>
				<div id="3.4.1" class="sub-title">init</div>
				<p>初始化方法，用于初始化验证内容、绑定方法。</p>
				<p>方法名：init</p>
				<p>参数：无</p>
				<p>返回值：无</p>
				<div id="3.4.2" class="sub-title">singleValid</div>
				<p>单体验证方法，该方法为内部验证方法，不建议单独调用。</p>
				<p>方法名：singleValid</p>
				<p>参数：</p>
				<p><code>element</code>：需要验证的对象。</p>
				<p>返回值：无</p>
				<div id="3.4.3" class="sub-title">valid</div>
				<p>执行全部验证，该方法一般不需要调用。</p>
				<p>方法名：valid</p>
				<p>参数：无</p>
				<p>返回值：无</p>
				<div id="3.4.4" class="sub-title">validResult</div>
				<p>获取验证结果。</p>
				<p>方法名：validResult</p>
				<p>参数：无</p>
				<p>返回值：验证成功返回true，验证失败返回false</p>
				<div id="3.4.5" class="sub-title">reset</div>
				<p>init方法的重载方法，同init方法相同。</p>
				<div id="3.5" class="title">静态方法</div>
				<hr />
				<p>静态方法为DT Validator制作过程中抽取出来的一些辅助方法，也可以公开使用，调用方式为：<code>$.fn.DtValidator.tools.方法</code>。</p>
				<div id="3.5.1" class="sub-title">toast</div>
				<p>提示方法。</p>
				<p>方法名：toast</p>
				<p>参数：</p>
				<p><code>content</code>：提示内容</p>
				<p><code>level</code>：提示级别，弱枚举类型，可选参数为：<code>info</code>、<code>warning</code>、<code>error</code>、<code>success</code>，默认值：<code>info</code></p>
				<p><code>time</code>：提示显示时间，单位为毫秒，整数类型（integer），默认值：3000</p>
				<p>返回值：无</p>
				<div id="3.5.2" class="sub-title">replaceAll</div>
				<p>替换所有内容。</p>
				<p>方法名：replaceAll</p>
				<p>参数：</p>
				<p><code>s</code>：原字符串</p>
				<p><code>s</code>1：需要替换的字符</p>
				<p><code>s2</code>：替换后的字符</p>
				<p>返回值：经过替换后的字符串结果</p>
				<div id="3.5.3" class="sub-title">length</div>
				<p>获取内容长度。</p>
				<p>方法名：length</p>
				<p>参数：</p>
				<p><code>s</code>：需要获取长度的字符串</p>
				<p>返回值：字符串长度，其中中文字符按两个字节计算。</p>
				<div id="3.6" class="title">高级功能</div>
				<hr />
				<div id="3.6.1" class="sub-title">唯一验证的封装</div>
				<p>请参阅DT Validator提供的本地项目内容中的实现。</p>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="footer">
		<div class="container copyright">
			<a href="http://www.dlshouwen.com">大连首闻科技有限公司</a>旗下产品
			&nbsp;&nbsp;
			<a href="http://dtvalidator.com">dtvalidator.com</a>
			&nbsp;&nbsp;
			<a href="javascript:void(0);">辽ICP备14014868号-5</a>
		</div>
	</div>
	<div id="back-to-top" class="back-to-top" title="回到顶部"><i class="fa fa-arrow-circle-up"></i></div>
</body>
</html>